{% extends 'base.html' %}

{% block title %}产品管理{% endblock %}

{% block content %}
<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>产品管理</h1>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addProductModal">
            添加产品
        </button>
    </div>

    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0">产品列表</h5>
        </div>
        <div class="card-body">
            {% if products %}
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>名称</th>
                            <th>类别</th>
                            <th>规格</th>
                            <th>材料成本</th>
                            <th>人工成本</th>
                            <th>总价</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for product in products %}
                        <tr>
                            <td>{{ product.id }}</td>
                            <td>{{ product.name }}</td>
                            <td>{{ product.category }}</td>
                            <td>{{ product.specification }}</td>
                            <td>{{ "%.2f"|format(product.material_cost) }}</td>
                            <td>{{ "%.2f"|format(product.labor_cost) }}</td>
                            <td>{{ "%.2f"|format(product.total_price) }}</td>
                            <td>
                                <a href="{{ url_for('product_detail', product_id=product.id) }}" class="btn btn-sm btn-primary">详情</a>
                                <button class="btn btn-sm btn-warning edit-product" data-product-id="{{ product.id }}">编辑</button>
                                <button class="btn btn-sm btn-danger delete-product" data-product-id="{{ product.id }}">删除</button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <p class="text-muted">暂无产品数据</p>
            {% endif %}
        </div>
    </div>
</div>

<!-- 添加产品模态框 -->
<div class="modal fade" id="addProductModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加产品</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="addProductForm">
                    <div class="mb-3">
                        <label for="productName" class="form-label">产品名称</label>
                        <input type="text" class="form-control" id="productName" required>
                    </div>
                    <div class="mb-3">
                        <label for="productCategory" class="form-label">产品类别</label>
                        <input type="text" class="form-control" id="productCategory" required>
                    </div>
                    <div class="mb-3">
                        <label for="productSpecification" class="form-label">规格</label>
                        <input type="text" class="form-control" id="productSpecification" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="submit" form="addProductForm" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById('addProductForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData();
    formData.append('name', document.getElementById('productName').value);
    formData.append('category', document.getElementById('productCategory').value);
    formData.append('specification', document.getElementById('productSpecification').value);
    
    fetch('/add_product', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            window.location.reload();
        } else {
            alert(data.message);
        }
    })
    .catch(error => {
        alert('添加失败：' + error);
    });
});
</script>
{% endblock %}